<template>
	<view class="a1">
		<u-form :model="form" ref="uForm">
			<button @click="submitvoid">点击上传视频</button>
			<u-form-item label="商品图片" label-width="80px" prop="imgurl">
				<template>
					<u-upload ref="uUpload" :action="action" :max-size="5 * 1024 * 1024" max-count="4"
						@on-uploaded="onUploaded" @on-Success="onSuccess"></u-upload>
				</template>
			</u-form-item>

			<u-form-item label="商品名称" label-width="80px" prop="orderDetailName">
				<u-input v-model="form.orderDetailName" />
			</u-form-item>

			<u-form-item label="简介" label-width="40px" prop="orderDetailIntroduce">
				<u-input v-model="form.orderDetailIntroduce" type="textarea" />
			</u-form-item>

			<u-form-item label="库存" label-width="40px" prop="orderDetailRepertory">
				<u-input v-model="form.orderDetailRepertory" />
			</u-form-item>

			<u-form-item label="单价" label-width="40px" prop="orderDetailPrice">
				<u-input v-model="form.orderDetailPrice" type="number" />
			</u-form-item>

			<u-form-item label="重量" label-width="40px" prop="orderDetailWeight">
				<u-input v-model="form.orderDetailWeight" />
			</u-form-item>

			<u-form-item label="种类" label-width="40px" prop="zl">
				<u-input v-model="form.zl" @click="showliebiao = true" type="select" placeholder="请选择" />
				<u-select v-model="showliebiao" mode="mutil-column-auto" :list="pinlei" value-name="parentsId"
					label-name="productsName" child-name="children" @confirm="confirm">
				</u-select>
			</u-form-item>

			<u-form-item label="类别" label-width="40px" prop="lb">

				<u-input v-model="form.lb" @click="show1 = true" type="select" placeholder="请选择" />
				<u-action-sheet :list="leibie" v-model="show1" @click="actionSheetCallback"></u-action-sheet>
			</u-form-item>

			<u-form-item label="拼团人数" label-width="80px" prop="spellGroupNumber" v-if="form.orderDetailStatus==2">
				<u-input v-model="form.spellGroupNumber" />
			</u-form-item>
			<u-form-item label="拼团价格" label-width="80px" prop="spellGroupPrice" v-if="form.orderDetailStatus==2">
				<u-input v-model="form.spellGroupPrice" type="number" />
			</u-form-item>

			<u-form-item label="是否支持七天无理由退货" label-width="220px" prop="th">
				<u-input v-model="form.th" @click="show = true" placeholder="请选择" />
				<u-select v-model="show" mode="single-column" :list="tuihuo" @confirm="StroageConfirm"> </u-select>
			</u-form-item>


			<u-form-item class="a1">
				<u-button size="mini" :ripple="true" :custom-style="customStyle" @click="fourShopSubmit">提交
				</u-button>
				<u-button size="mini" :ripple="true" @click="cancel">取消</u-button>
			</u-form-item>
		</u-form>
		<template>
			<view>
				<u-modal v-model="tan" :content="content" title="提示" @confirm="confirmtt"></u-modal>
			</view>
		</template>
	</view>
</template>

<script>
	import request from '../../../utils/request.js'
	export default {
		data() {
			return {
				tan: false,
				content: '上架成功',
				showliebiao: false,
				customStyle: {
					// marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: 'blue'
				},
				action: 'http://localhost:9090/before/bgs/store/FourOpenImg',
				show: false,
				show1: false,
				tuihuo: [{
						label: '是',
						value: 0
					},
					{
						label: '否',
						value: 1
					}
				],
				leibie: [{
						text: '认领',
						value: 0
					},
					{
						text: '直购',
						value: 1
					},
					{
						text: '团品和直购',
						value: 2
					}
				],
				form: {
					orderDetailRepertory: '',
					orderDetailName: '',
					salesReturn: undefined,
					orderDetailPrice: undefined,
					spellGroupNumber: 1,
					productId: undefined,
					orderDetailWeight: '',
					fileList: [],
					storeId: undefined,
					orderDetailIntroduce: '',
					orderDetailStatus: undefined,
					spellGroupPrice: undefined,
					imgurl: '',
					zl: '',
					lb: '',
					th: '',
					videoUrl:''
				},
				radio: '',
				switchVal: false,
				pinlei: [],
				addi: 0,
				rules: {
					orderDetailName: [{
							required: true,
							message: '请输入商品名',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['blur', 'change']
						},
						// 6-8个字符之间的判断
						{
							min: 2,
							max: 8,
							message: '长度在5-8个字符之间',
							trigger: ['blur', 'change']
						},
						// 正则判断为字母或数字
						// 	{
						// 		pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/g,
						// 		// 正则检验前先将值转为字符串
						// 		transform(value) {
						// 			return String(value);
						// 		},
						// 		message: '只能包含字母或汉字',
						// 		trigger: ['blur', 'change']
						// 	},
					],
					imgurl: [{
						required: true,
						message: '请添加图片',
						trigger: ['blur', 'change']
					}],
					orderDetailIntroduce: [{
						required: true,
						message: '简介不允许为空',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['blur', 'change']
					}],
					orderDetailRepertory: [{
						required: true,
						message: '库存不允许为空',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['blur', 'change']
					}],
					orderDetailPrice: [{
						required: true,
						message: '价格不允许为空',
						trigger: ['blur', 'change']
					}],
					orderDetailWeight: [{
						required: true,
						message: '重量不允许为空',
						trigger: ['blur', 'change']
					}],
					lb: [{
						required: true,
						message: '类别不允许为空',
						trigger: ['change']
					}],
					zl: [{
						required: true,
						message: '种类不允许为空',
						trigger: ['change']
					}],
					spellGroupPrice: [{
						required: true,
						message: '团价不允许为空',
						trigger: ['blur', 'change']
					}],
					th: [{
						required: true,
						message: '此处不允许为空',
						trigger: ['blur', 'change']
					}]

				}
			}
		},
		created() {
			this.queryliebie()
		},
		onLoad: function(option) {
			this.form.storeId = option.id
		},
		methods: {
			submitvoid() {
				uni.chooseVideo({
					maxDuration: 60,
					count: 1,
					success: (responent) => {
						let videoFile = responent.tempFilePath;
						console.log(videoFile[0])
						uni.uploadFile({
							url: 'http://localhost:9090/detail//bgs/picture/handelPic',
							fileType: 'video',
							filePath: videoFile,
							name: 'file',
							success: (res) => {
								console.log(res.data)
								this.form.videoUrl=res.data
							}
						})

					}
				})
			},
			cancel() {
				// #ifdef APP-PLUS
				wx.navigateBack({
					changed: true
				})
				// #endif
				window.history.back()
				// window.location.href=document.referrer

			},
			onReady() {
				this.$refs.uForm.setRules(this.rules);
			},
			queryliebie() {
				request({
					url: '/before/bgs/products/fourKindList',
					method: 'GET',
					success: (res) => {
						this.pinlei = res.data.data.data
					}
				})
			},
			StroageConfirm(e) {
				this.form.salesReturn = e[0].value
				console.log(this.form.salesReturn)
				this.form.th = e[0].label
			},
			actionSheetCallback(index) {
				this.form.orderDetailStatus = this.leibie[index].value;
				console.log(this.form.orderDetailStatus)
				this.form.lb = this.leibie[index].text;
			},
			onUploaded(lists, name) {
				// this.form.img = lists[0].response
				// console.log(lists)
				// var url = lists[0].response;
				// this.form.fileList.push(url)
				// console.log(this.form.fileList)
				let curr = {
					pictureUrl: ''
				}
				curr.pictureUrl = lists[this.addi].response
				this.addi++
				this.form.imgurl = lists[0].response
				this.form.fileList.push(curr)
			},
			fourShopSubmit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						request({
							url: '/detail/bgs/order-detail/fourAddWupin',
							method: 'Post',
							data: this.form,
							success: (res) => {
								console.log('添加成功')
								this.tan = true
							}
						})
						console.log("成功")
					} else {
						console.log('验证失败');
					}
				});
			},
			confirm(e) {
				console.log(e)
				this.form.productId = e[2].value

				for (var i = 0; i < e.length; i++) {
					this.form.zl += e[i].label;
				}
			},
			confirmtt() {
				uni.reLaunch({
					url: "../gotoshop/gotoshop"
				})
			}
		}
	};
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	.a1 {
		height: 100px;
		margin-left: 8px;
		margin-bottom: 50px;
	}
</style>
